import React,{useState} from 'react'
import { useEffect } from 'react'
export default function Function() {
  const [name,setName]=useState('牛子')
  const [count,setCount]=useState(0)
  function changeName(){
    setName('鸡尾')
  }

  function changeCount(){
    setCount(c=>c+1)
  }
  // 依赖项是个空数组，useEffect初始化时调用，清除函数卸载时调用
  // useEffect(()=>{
  //    console.log('useEffect1调用');
  //    return ()=>{
  //       console.log('清除函数1调用');
  //    }
  // },[])
  

  // 依赖项是具体值,初始化时，这个值改变时useEffect调用。卸载时，这个值改变时清除函数调用。
  // useEffect(()=>{
  //    console.log('useEffect2调用');
  //    return ()=>{
  //     console.log('清除函数2调用');
  //    }
  // },[count])

  // 依赖项什么都不写，初始化时，这个值改变时，useEffect调用。卸载时，这个值改变时清除函数调用。
  useEffect(()=>{
    console.log('useEffect3调用');
    return()=>{
      console.log('清除函数3调用');
    }
  })
  return (
    <div>Function
        <span style={{color:'red',fontSize:'20px'}}>{name}{count}</span>
        <button onClick={changeName}>屠牛</button>
        <button onClick={changeCount}>计数</button>
    </div>
  )
}
